/**
 * 组件名称：WideIpdNavItem
 * 使用场景：Sidebar中的蓝色导航按钮(用于宽屏幕下展示)
 * 功能介绍：单个具有访问状态的导航按钮，且支持权限判定
 * 功能进度：95%，具体怎么判定，需要和后端协商
 * 待办事项：无
 */

"use client";
import Link from "next/link";
import {useSelectedLayoutSegment} from "next/navigation";
import classes from "./WideIpdNavItem.module.css";
import {UnstyledButton, Text, Tooltip, Group} from "@mantine/core";
import {modals} from "@mantine/modals"; // 导入 Mantine 的 modals
import {useState, useEffect} from "react";

interface NavProps {
  nav: string;
  label: string;
  icon: React.FC<any>;
  requireAdmin?: boolean; // 添加一个标记，是否需要管理员权限
}

export const WideIpdNavItem = ({nav, label, icon: Icon, requireAdmin = false}: NavProps) => {
  // 2024.1.20重新规划了前端路由，删除了影响观感和处理的括号，因此这里无需判断左括号了
  // 并且可以继续使用useSelectedLayoutSegment了（不带s）
  // const isActive = nav === segment.filter((item) => !item.startsWith("("))[0];

  // 2024.02.01，发现tools中的选中状态不生效，本组件选中状态的效果生效。
  // 经排查，useSelectedLayoutSegment受layout.tsx影响严重，多级嵌套时容易对开发者造成迷惑
  // 慎重考虑后，决定使用usePathname这一绝对路径，再也不会出现错误了

  // 但使用绝对路径又会被路由重定向所影响
  // 无奈又改回useSelectedLayoutSegment

  const realhref = `/ipdv2/${nav}`;
  const segment = useSelectedLayoutSegment();
  const isActive = segment === nav;
  const [user, setUser] = useState<{permissions: string[]} | null>(null);
  const [opened, setOpened] = useState(false); // 控制 Modal 的开关状态

  // 模拟获取用户信息（你可以替换为实际的逻辑）
  useEffect(() => {
    const fetchUser = async () => {
      const user = {permissions: ["user"]}; // 假设用户没有 admin 权限
      setUser(user);
    };
    fetchUser();
  }, []);

  const openPermissionModal = () => {
    modals.openConfirmModal({
      title: "权限不足",
      children: <Text size="sm">您没有权限访问该页面。</Text>,
      labels: {confirm: "确定", cancel: "取消"},
      confirmProps: {color: "red"},
      onConfirm: () => {}, // 仅需关闭弹窗，不执行其他操作
    });
  };

  const handleNavigation = (event: React.MouseEvent) => {
    // 检查权限（假设没有用户权限）
    if (requireAdmin) {
      // event.preventDefault(); // 阻止默认的链接跳转
      // openPermissionModal(); // 打开无权限弹窗
    }
  };

  return (
    <>
      <UnstyledButton
        component={Link}
        href={realhref}
        className={isActive ? classes.linkSelected : classes.linkDefault}
        onClick={handleNavigation} // 点击时检查权限
      >
        <Icon className={isActive ? classes.iconSelected : classes.iconDefault} stroke={1.5}></Icon>
        <span className={classes.text}>{label}</span>
      </UnstyledButton>
    </>
  );
};
